<!DOCTYPE html>
<html lang="en">
<head>

<!-- meta tags -->
<meta charset="utf-8">
<meta name="keywords" content="bootstrap 4, premium, multipurpose, ecommerce, html5, CSS" />
<meta name="description" content="Bootstrap 4 Landing Page Template" />
<meta name="author" content="www.themesground.com" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Title -->
  <title>佩奇牧场-商品</title>
<!-- Favicon Icon -->
<link rel="shortcut icon" href="assets/images/pagepig.ico" />

<!-- inject css start -->

<link href="assets/css/theme-plugin.css" rel="stylesheet" />
<link href="assets/css/theme.min.css" rel="stylesheet" />

<!-- inject css end -->

</head>

<body>

<!-- page wrapper start -->

<div class="page-wrapper"> 
  
  <!-- preloader start -->
  
  <div id="ht-preloader">
    <div class="loader clear-loader"> <img class="img-fluid" src="assets/images/loader.gif" alt=""> </div>
  </div>
  
  <!-- preloader end --> 
  
  <!--header start-->
  
  <header class="site-header header-1">
   
    <div id="header-wrap">
      <div class="container">
        <div class="row">  
          <!--menu start-->
          <div class="col">
            <nav class="navbar navbar-expand-lg navbar-light position-static"> 
			<a style="width: 64px;height: 64px;" href="index.html"> <img class="img-fluid" src="assets/images/pplogo.png" alt=""> </a>
			<a class="navbar-brand logo" href="index.html"> <img class="img-fluid" src="assets/images/logo001.png" alt=""> </a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto mr-auto">
                  
                  <li class="nav-item dropdown position-static"> <a class="nav-link dropdown-toggle" href="#" style="color: red;">猪肉分类</a>
                    <div class="dropdown-menu w-100"> 
                      <!-- Tabs -->
                      <div class="container p-0">
                        <div class="row w-100 no-gutters">
                          <div class="col-lg-8 p-lg-3">
                            <div class="row">
                              <div class="col-12 col-md-3 col-sm-6"> 
                                <!-- Heading -->
                                <div class="mb-2 font-w-5 text-link">部分1</div>
                                <!-- Links -->
                                <ul class="list-unstyled mb-6 mb-md-0">
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                </ul>
                              </div>
                              <div class="col-12 col-md-3 col-sm-6"> 
                                <!-- Heading -->
                                <div class="mb-2 font-w-5 text-link">部分2</div>
                                <!-- Links -->
                                <ul class="list-unstyled mb-6 mb-md-0">
                                  <li> <a href="#">Caps &amp; Hats</a> </li>
                                  <li> <a href="#">Gloves &amp; Arm Warmers</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试 测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                </ul>
                              </div>
                              <div class="col-12 col-md-3 col-sm-6"> 
                                <!-- Heading -->
                                <div class="mb-2 font-w-5 text-link">部分3</div>
                                <!-- Links -->
                                <ul class="list-unstyled mb-6 mb-md-0">
                                  <li> <a href="#">测试</a> </li>
                                  <li> <a href="#">Chains &amp; Necklaces</a></li>
                                  <li> <a href="#">Bangles &amp; Bracelets</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">Coins &amp; Bars</a></li>
                                  <li> <a href="#">Nose Rings &amp; Pins</a></li>
                                  <li> <a href="#">Beads &amp; Charms</a></li>
                                  <li> <a href="#">测试 Accessories</a></li>
                                  <li> <a href="#">测试</a></li>
                                </ul>
                              </div>
                              <div class="col-12 col-md-3 col-sm-6"> 
                                <!-- Heading -->
                                <div class="mb-2 font-w-5 text-link">部分4</div>
                                <!-- Links -->
                                <ul class="list-unstyled mb-0">
                                  <li> <a href="#">Running Shoes</a> </li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">Loafers &amp; Moccasins</a></li>
                                  <li> <a href="#">Boots</a></li>
                                  <li> <a href="#">Formal Shoes</a></li>
                                  <li> <a href="#">Hiking Footwear</a></li>
                                  <li> <a href="#">测试 Shoes</a></li>
                                  <li> <a href="#">Ethnic Footwear</a></li>
                                  <li> <a href="#">Fashion 测试</a></li>
                                  <li> <a href="#">测试 Flats</a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-4 d-none d-lg-block pr-2"> <img class="img-fluid rounded-bottom rounded-top" src="assets/images/header-img.jpg" alt="..."> </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item dropdown position-static"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">农场养殖</a>
                    <div class="dropdown-menu w-100 custom-drop">
                      <div class="container p-0">
                        <div class="row w-100 no-gutters">
                          <div class="col-12 col-md-4 p-lg-3"> 
                            <!-- Heading -->
                            <div class="mb-2 font-w-5 text-link">Shop Layout</div>
                            <!-- Links -->
                            <ul class="list-unstyled mb-6 mb-md-0">
                              <li> <a href="product-grid.html">Product Grid</a> </li>
                              <li> <a href="product-grid-left-sidebar.html">Product Grid Left Sidebar</a> </li>
                              <li> <a href="product-grid-right-sidebar.html">Product Grid Right Sidebar</a> </li>
                              <li> <a href="product-list.html">Product List</a> </li>
                              <li> <a href="product-list-left-sidebar.html">Product List Left Sidebar</a> </li>
                              <li> <a href="product-list-right-sidebar.html">Product List Right Sidebar</a> </li>

                            </ul>
                          </div>
                          <div class="col-12 col-md-4 p-lg-3"> 
                            <!-- Heading -->
                            <div class="mb-2 font-w-5 text-link">Product Pages</div>
                            <!-- Links -->
                            <ul class="list-unstyled mb-6 mb-md-0">
                              <li> <a href="product-default.html">Product Default</a> </li>
                              <li> <a href="product-default-right-image.html">Product Default Right Image</a> </li>
                              <li> <a href="product-left-image.html">Product Left Image</a> </li>
                              <li> <a href="product-right-image.html">Product Right Image</a> </li>
                              <li> <a href="product-left-sidebar.html">Product Left Sidebar</a> </li>
                              <li> <a href="product-right-sidebar.html">Product Right Sidebar</a> </li>

                            </ul>
                          </div>
                          <div class="col-12 col-md-4 p-lg-3"> 
                            <!-- Heading -->
                            <div class="mb-2 font-w-5 text-link">Other Pages</div>
                            <!-- Links -->
                            <ul class="list-unstyled mb-6 mb-md-0">
                              <li> <a href="shopping-cart.html">Shopping Cart</a> </li>
                              <li> <a href="checkout.html">Checkout</a> </li>
                              <li> <a href="my-account.html">My Account</a> </li>
                              <li> <a href="wishlist.html">Wishlist</a> </li>
                              <li> <a href="compare.html">Compare</a> </li>
                              <li> <a href="order-complete.html">Order Completed</a> </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">明星产品</a>
                    <ul class="dropdown-menu">
                      <li> <a href="about-us.html">About Us</a> </li>
                      <li> <a href="login.html">Login</a> </li>
                      <li> <a href="signup.html">Signup</a> </li>
                      <li> <a href="forgot-password">Forgot Password</a> </li>
                      <li> <a href="coming-soon.html">Coming Soon</a> </li>
                      <li> <a href="error-404.html">404 Error</a> </li>
                      <li> <a href="faq.html">FAQ</a> </li>
                      <li> <a href="privacy-policy.html">Privacy Policy</a> </li>
                      <li> <a href="terms-and-conditions.html">Term & Conditions</a> </li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">特色菜谱</a>
                    <ul class="dropdown-menu">
                      <li><a href="blog-grid.html">Blog Grid</a> </li>
                      <li><a href="blog-grid-left.html">Blog Grid Left</a> </li>
                      <li><a href="blog-grid-right.html">Blog Grid Right</a> </li>
                      <li><a href="blog-list-left.html">Blog List Left</a> </li>
                      <li><a href="blog-list-right.html">Blog List Right</a> </li>
                       <li><a href="blog-detail.html">Blog Detail</a> </li>
                       <li><a href="blog-detail-left.html">Blog Detail Left</a> </li>
                       <li><a href="blog-detail-right.html">Blog Detail Right</a> </li>
                    </ul>
                  </li>
                  <li class="nav-item"> <a class="nav-link" href="contact-us.html">关于我们</a> </li>
                </ul>
              </div>
              <div class="right-nav align-items-center d-flex justify-content-end">
                <div class="mr-1 mr-sm-3 search-block"> <a href="javascript:void(0);" class="search_trigger ml-3"></a>
                  <div class="search_wrap container"> <span class="close-search"><i class="ion-ios-close-empty"></i></span>
                    <form>
                      <input type="text" placeholder="Search" class="form-control" id="search_input">
                      <button type="submit" class="search_icon"><i class="las la-search"></i></button>
                    </form>
                  </div>
                </div>
                <a class="mr-1 mr-sm-3" href="#"><i class="las la-user-alt"></i></a> 
                <div class="dropdown cart_dropdown"> <a class="d-flex align-items-center" href="#"> <span class="bg-white pr-2 pl-0 py-1 rounded" data-cart-items="2"> <i class="las la-shopping-bag"></i> </span> </a>
                  <div class="cart_box dropdown-menu dropdown-menu-right">
                    <ul class="cart_list">
                      <li> <a href="#" class="item_remove"><i class="ion-ios-close-empty"></i></a> <a href="#"><img src="assets/images/product/p8.jpg" alt="cart_thumb1">招牌黑猪排骨</a> <span class="cart_quantity"> 1 x <span class="cart_amount"> <span class="price_symbole">$</span></span>69.00</span> </li>
                      <li> <a href="#" class="item_remove"><i class="ion-ios-close-empty"></i></a> <a href="#"><img src="assets/images/product/p12.jpg" alt="cart_thumb2">招牌黑猪前腿</a> <span class="cart_quantity"> 1 x <span class="cart_amount"> <span class="price_symbole">$</span></span>81.00</span> </li>
                    </ul>
					<!-- 购物车提交 -->
                    <div class="cart_footer">
                      <p class="cart_total"><strong>总金额:</strong> <span class="cart_price"> <span class="price_symbole">$</span></span>150.00</p>
                      <p class="cart_buttons" ><a href="#" class="btn btn-secondary view-cart ml-2 mr-2">查看购物车</a><a href="localhost:8091/alipay" class="btn btn-primary ml-2 mr-2 checkout" onclick="itempay()">付款</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </nav>
          </div>
          <!--menu end--> 
        </div>
      </div>
    </div>
  </header>
  
<!--header end-->
<!--header end-->


<!--hero section start-->

<section class="bg-light py-6">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6">
        <h1 class="h2 mb-0">Product Left Image</h1>
      </div>
      <div class="col-md-6 mt-3 mt-md-0">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb justify-content-md-end bg-transparent p-0 m-0">
            <li class="breadcrumb-item"><a class="link-title" href="#">Home</a> </li>
            <li class="breadcrumb-item"><a class="link-title" href="#">Shop</a></li>
            <li class="breadcrumb-item active text-primary" aria-current="page">Product Left Image</li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- / .row -->
  </div>
  <!-- / .container -->
</section>

<!--hero section end-->


  <!--body content start-->

  <div class="page-content">

    <!--product details start-->

    <section>
      <div class="container">
        <div class="row">
          <div class="col-lg-6 col-12">
            <ul id="imageGallery">
              <li data-thumb="assets/images/goods/五花肉/五花肉01.jpg" data-src="assets/images/product/p11.jpg">
                <img class="img-fluid w-100" src="assets/images/goods/五花肉/五花肉01.jpg" alt=""/>
              </li>
              <li data-thumb="assets/images/goods/五花肉/五花肉02.jpg" data-src="assets/images/product/p13.jpg">
                <img class="img-fluid w-100" src="assets/images/goods/五花肉/五花肉02.jpg" alt=""/>
              </li>
              <li data-thumb="assets/images/goods/五花肉/五花肉03.jpg" data-src="assets/images/product/p10.jpg">
                <img class="img-fluid w-100" src="assets/images/goods/五花肉/五花肉03.jpg" alt=""/>
              </li>
              <li data-thumb="assets/images/goods/五花肉/五花肉04.jpg" data-src="assets/images/product/p15.jpg">
                <img class="img-fluid w-100" src="assets/images/goods/五花肉/五花肉04.jpg" alt=""/>
              </li>

            </ul>
          </div>
          <div class="col-lg-6 col-12 mt-5 mt-lg-0">
            <div class="product-details">
              <h1 class="h4 mb-0 font-w-6">商品名字</h1>
              <div class="star-rating mb-4"><i class="las la-star"></i><i class="las la-star"></i><i
                      class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i>
              </div>
              <span class="product-price h5 text-pink">6666666 <del class="text-muted h6">8888888</del></span>
              <ul class="list-unstyled my-3">
                <li><small>库存：<span class="text-green">9999</span> </small>
                </li>
                <li class="font-w-4"><small>类型：<span class="text-muted"> 猪，猪肉</span></small>
                </li>
              </ul>
              <p class="mb-4 desc">这里是商品描述信息，测试</p>
              <div class="d-sm-flex align-items-center mb-5">
                <div class="d-flex align-items-center mr-sm-4">
                  <button class="btn-product btn-product-up"><i class="las la-minus"></i>
                  </button>
                  <input class="form-product" type="number" name="form-product" value="1">
                  <button class="btn-product btn-product-down"><i class="las la-plus"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="d-sm-flex align-items-center mt-5">
              <button class="btn btn-primary btn-animated mr-sm-3 mb-3 mb-sm-0"><i class="las la-shopping-cart mr-2"></i>添加购物车
              </button>
              <a class="btn btn-animated btn-dark" href="#"> <i class="lar la-heart mr-2 ic-1-2x"></i>添加到愿望单
              </a>
            </div>
          </div>
        </div>
      </div>
  </div>
  </section>

  <!--product details end-->


  <!--tab start-->

  <section class="pt-0 pb-8">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="tab product-tab">
            <!-- Nav tabs -->
            <nav>
              <div class="nav nav-tabs" id="nav-tab" role="tablist"><a class="nav-item nav-link active ml-0" id="nav-tab1"
                                                                       data-toggle="tab" href="#tab3-1" role="tab"
                                                                       aria-selected="true">商品详细介绍</a>
                <a class="nav-item nav-link" id="nav-tab2" data-toggle="tab" href="#tab3-2" role="tab"
                   aria-selected="false">商品详情</a>
              </div>
            </nav>
            <!-- Tab panes -->
            <div class="tab-content pt-5 p-0">
              <div role="tabpanel" class="tab-pane fade show active" id="tab3-1">
                <div class="row align-items-center">

                  <div class="col-md-12">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla. Donec a neque libero. Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Mauris vel tellus non nunc mattis lobortis. vulputate adipiscing cursus eu, suscipit id nulla. Donec a neque libero. Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. </p>
                    <p>Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eleifend laoreet congue. Vivamus adipiscing nisl ut dolor dignissim semper. Nulla luctus malesuada tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer enim purus, posuere at ultricies eu, placerat a felis. Suspendisse aliquet urna pretium eros convallis interdum. Quisque in arcu id dui vulputate mollis eget non arcu. Aenean et nulla purus. Mauris vel tellus non nunc mattis lobortis. vulputate adipiscing cursus eu, suscipit id nulla. Donec a neque libero. Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, vulputate adipiscing cursus eu, suscipit id nulla. Donec a neque libero. Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit.</p>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane fade" id="tab3-2">
                <table class="table table-bordered mb-0">
                  <tbody>
                  <tr>
                    <td>商品名称</td>
                    <td>跑山猪400g/袋</td>
                  </tr>
                  <tr>
                    <td>商品编号</td>
                    <td>100004383387</td>
                  </tr>
                  <tr>
                    <td>商品毛重</td>
                    <td>450.0g</td>
                  </tr>
                  <tr>
                    <td>商品产地</td>
                    <td>中国广东珠海</td>
                  </tr>
                  <tr>
                    <td>品种</td>
                    <td>黑猪</td>
                  </tr>
                  <tr>
                    <td>类别</td>
                    <td>猪里脊</td>
                  </tr>
                  <tr>
                    <td>保质期</td>
                    <td>365天</td>
                  </tr>
                  <tr>
                    <td>储存条件</td>
                    <td>深冷、冷冻 -18℃</td>
                  </tr>
                  </tbody>
                </table>
              </div>

              <div class="comment-area mt-5">
                <div class="content_title">
                  <h4>评论</h4>
                </div>
                <ul class="list_none comment_list">
                  <li class="comment_info">
                    <div class="d-flex">
                      <div class="comment_user">
                        <img src="assets/images/thumbnail/member1.png" alt="user2">
                      </div>
                      <div class="comment_content">
                        <div class="d-flex">
                          <div class="meta_data">
                            <h6><a href="#">永贵</a></h6>
                            <div class="comment-time">2020-11-21 16:50</div>
                          </div>
                          <div class="ml-auto">
                            <a href="#" class="comment-reply"><i class="las la-arrow-left"></i> Reply</a>
                          </div>
                        </div>
                        <p>这个猪蹄已经回购好几次了，酱猪蹄还是炖猪蹄都很好吃，皮很筋道，肥肉很少，一看就是经常运动的小猪猪?，女儿吃了直说好吃，还会继续回购的</p>
                      </div>
                    </div>
                    <ul class="children">
                      <li class="comment_info">
                        <div class="d-flex">
                          <div class="comment_user">
                            <img src="assets/images/thumbnail/member2.png" alt="user3">
                          </div>
                          <div class="comment_content">
                            <div class="d-flex align-items-md-center">
                              <div class="meta_data">
                                <h6><a href="#">涂也</a></h6>
                                <div class="comment-time">2020-11-20 15:30</div>
                              </div>
                              <div class="ml-auto">
                                <a href="#" class="comment-reply"><i class="las la-arrow-left"></i> Reply</a>
                              </div>
                            </div>
                            <p>
                              以前买过这个牌子的肉馅，挺香的，这次三件五折，买了里脊和排骨。里脊还不错，不过一块肉有两种颜色，一边深一些一边浅一些，看起来也不是两块肉冻在一起，也不知咋回事。</p>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <li class="comment_info">
                    <div class="d-flex">
                      <div class="comment_user">
                        <img src="assets/images/thumbnail/member3.png" alt="user4">
                      </div>
                      <div class="comment_content">
                        <div class="d-flex">
                          <div class="meta_data">
                            <h6><a href="#">林小志</a></h6>
                            <div class="comment-time">2020-11-21 16:37</div>
                          </div>
                          <div class="ml-auto">
                            <a href="#" class="comment-reply"><i class="las la-arrow-left"></i> Reply</a>
                          </div>
                        </div>
                        <p>
                          物流超级满意，上午下的单，下午就收到货了，拿到手上的时候还冻得硬邦邦的，这款猪肉馅之前有买过，味道很不错，这次刚好赶上活动，又入手了两袋。生产日期九月份的！这款味道很好，肥瘦搭配的非常完美，不管是入馅或者是做丸子都是不错的选择！</p>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="mt-8 bg-light-4 rounded p-5">
                  <div class="section-title mb-3">
                    <h4>添加评论</h4>
                  </div>
                  <form id="contact-form" class="row" method="post" action="contact.php">
                    <div class="messages"></div>
                    <div class="form-group col-12">
                    <textarea id="form_message" name="message" class="form-control" placeholder="请让我知道您的反馈" rows="4"
                              required data-error="系统繁忙,请重试!"></textarea>
                      <div class="help-block with-errors"></div>
                    </div>
                    <div class="col-12">
                      <button class="btn btn-primary btn-animated mt-1">填写评论</button>
                    </div>
                  </form>
                </div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</section>

<!--tab end-->

<!--tab start-->

<section class="pt-0 pb-8">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="tab product-tab">
          <!-- Nav tabs -->
          <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active ml-0" id="nav-tab1" data-toggle="tab" href="#tab3-1" role="tab" aria-selected="true">Description</a>
              <a class="nav-item nav-link" id="nav-tab2" data-toggle="tab" href="#tab3-2" role="tab" aria-selected="false">Specification</a>
              <a class="nav-item nav-link" id="nav-tab3" data-toggle="tab" href="#tab3-3" role="tab" aria-selected="false">Ratings and Reviews</a>
            </div>
          </nav>
          <!-- Tab panes -->
          <div class="tab-content pt-5 p-0">
            <div role="tabpanel" class="tab-pane fade show active" id="tab3-1">
              <div class="row align-items-center">
                
                <div class="col-md-12">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero vulputate rutrum. Morbi ornare lectus quis justo gravida semper. Nulla tellus mi, vulputate adipiscing cursus eu, suscipit id nulla. Donec a neque libero. Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Mauris vel tellus non nunc mattis lobortis. vulputate adipiscing cursus eu, suscipit id nulla. Donec a neque libero. Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. </p>
                  <p>Nunc facilisis sagittis ullamcorper. Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eleifend laoreet congue. Vivamus adipiscing nisl ut dolor dignissim semper. Nulla luctus malesuada tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer enim purus, posuere at ultricies eu, placerat a felis. Suspendisse aliquet urna pretium eros convallis interdum. Quisque in arcu id dui vulputate mollis eget non arcu. Aenean et nulla purus. Mauris vel tellus non nunc mattis lobortis. vulputate adipiscing cursus eu, suscipit id nulla. Donec a neque libero. Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit est, vulputate adipiscing cursus eu, suscipit id nulla. Donec a neque libero. Pellentesque aliquet, sem eget laoreet ultrices, ipsum metus feugiat sem, quis fermentum turpis eros eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate, sapien libero hendrerit.</p> 
                </div>
              </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab3-2">
              <table class="table table-bordered mb-0">
                <tbody>
                  <tr>
                    <td>Size</td>
                    <td>Small, Medium, Large &amp; Extra Large</td>
                  </tr>
                  <tr>
                    <td>Color</td>
                    <td>Yellow, Red, Blue, Green &amp; Black</td>
                  </tr>
                  <tr>
                    <td>Chest</td>
                    <td>38 inches</td>
                  </tr>
                  <tr>
                    <td>Waist</td>
                    <td>20 cm</td>
                  </tr>
                  <tr>
                    <td>Length</td>
                    <td>35 cm</td>
                  </tr>
                  <tr>
                    <td>Fabric</td>
                    <td>Cotton, Silk &amp; Synthetic</td>
                  </tr>
                  <tr>
                    <td>Warranty</td>
                    <td>6 Months</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab3-3">
              <div class="row align-items-center">
                <div class="col-md-6">
                  <div class="bg-light-4 text-center p-5">
                    <h4>Based on 3 Reviews</h4>
                    <h5>Average</h5>
                    <h4>4.0</h4>
                    <h6>(03 Reviews)</h6>
                  </div>
                </div>
                <div class="col-md-6 mt-3 mt-lg-0">
                  <div class="rating-list">
                    <div class="d-flex align-items-center mb-2">
                      <div class="text-nowrap mr-3">5 Star</div>
                      <div class="w-100">
                        <div class="progress" style="height: 5px;">
                          <div class="progress-bar bg-success" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </div><span class="text-muted ml-3">90%</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                      <div class="text-nowrap mr-3">4 Star</div>
                      <div class="w-100">
                        <div class="progress" style="height: 5px;">
                          <div class="progress-bar bg-success" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </div><span class="text-muted ml-3">60%</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                      <div class="text-nowrap mr-3">3 Star</div>
                      <div class="w-100">
                        <div class="progress" style="height: 5px;">
                          <div class="progress-bar bg-success" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </div><span class="text-muted ml-3">40%</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                      <div class="text-nowrap mr-3">2 Star</div>
                      <div class="w-100">
                        <div class="progress" style="height: 5px;">
                          <div class="progress-bar bg-warning" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </div><span class="text-muted ml-3">20%</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                      <div class="text-nowrap mr-3">1 Star</div>
                      <div class="w-100">
                        <div class="progress" style="height: 5px;">
                          <div class="progress-bar bg-danger" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </div><span class="text-muted ml-3">10%</span>
                    </div>
                  </div>
                </div>
              </div>
              
              
              <div class="comment-area mt-5">
                    <div class="content_title">
                        <h4>Comments</h4>
                    </div>
                    <ul class="list_none comment_list">
                        <li class="comment_info">
                            <div class="d-flex">
                                <div class="comment_user">
                                    <img src="assets/images/thumbnail/member1.png" alt="user2">
                                </div>
                                <div class="comment_content">
                                    <div class="d-flex">
                                        <div class="meta_data">
                                            <h6><a href="#">Saraha Doe</a></h6>
                                            <div class="comment-time">March 5, 2020, 07:35 PM</div>
                                        </div>
                                        <div class="ml-auto">
                                            <a href="#" class="comment-reply"><i class="las la-arrow-left"></i> Reply</a>
                                        </div>
                                    </div>
                                    <p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                </div>
                            </div>
                            <ul class="children">
                            	<li class="comment_info">
                                    <div class="d-flex">
                                        <div class="comment_user">
                                            <img src="assets/images/thumbnail/member2.png" alt="user3">
                                        </div>
                                        <div class="comment_content">
                                            <div class="d-flex align-items-md-center">
                                                <div class="meta_data">
                                                    <h6><a href="#">Stephen Smith</a></h6>
                                                    <div class="comment-time">April 19, 2020, 01:45 PM</div>
                                                </div>
                                                <div class="ml-auto">
                                                    <a href="#" class="comment-reply"><i class="las la-arrow-left"></i> Reply</a>
                                                </div>
                                            </div>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, ex, quisquam. Nulla excepturi sint iusto incidunt sed omnis expedita, commodi dolores. Debitis nemo animi quia deleniti commodi nesciunt illo.</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="comment_info">
                            <div class="d-flex">
                                <div class="comment_user">
                                    <img src="assets/images/thumbnail/member3.png" alt="user4">
                                </div>
                                <div class="comment_content">
                                    <div class="d-flex">
                                        <div class="meta_data">
                                            <h6><a href="#">Karla Anderson </a></h6>
                                            <div class="comment-time">may 25, 2020, 05:20 PM</div>
                                        </div>
                                        <div class="ml-auto">
                                            <a href="#" class="comment-reply"><i class="las la-arrow-left"></i> Reply</a>
                                        </div>
                                    </div>
                                    <p>Aliquam vehicula neque ac nibh suscipit ultrices. Morbi interdum accumsan arcu nec scelerisque. Nulla quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Donec rutrum congue leo eget malesuada.</p>
                                </div>
                            </div>
                        </li>
                    </ul>
          <div class="mt-8 bg-light-4 rounded p-5">
                <div class="section-title mb-3">
                  <h4>Add a review</h4>
                </div>
                <form id="contact-form" class="row" method="post" action="contact.php">
                  <div class="messages"></div>
                  <div class="form-group col-sm-6">
                    <input id="form_name" type="text" name="name" class="form-control" placeholder="Your Name" required data-error="Name is required.">
                    <div class="help-block with-errors"></div>
                  </div>
                  <div class="form-group col-sm-6">
                    <input id="form_email" type="email" name="email" class="form-control" placeholder="Your Email Address" required data-error="Valid email is required.">
                    <div class="help-block with-errors"></div>
                  </div>
                  <div class="form-group clearfix col-12">
                    <select class="custom-select form-control">
                      <option value="">Rating -- Select</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select>
                  </div>
                  <div class="form-group col-12">
                    <textarea id="form_message" name="message" class="form-control" placeholder="Write Your Review" rows="4" required data-error="Please,leave us a review."></textarea>
                    <div class="help-block with-errors"></div>
                  </div>
                  <div class="col-12">
                    <button class="btn btn-primary btn-animated mt-1">Post Review</button>
                  </div>
                </form>
              </div>
          <div></div>
        </div>
              
              
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!--tab end-->


<!--recent product start-->

<section class="pb-6 border-top pt-7">
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-lg-8 col-md-10">
        <div class="mb-5">
          <h2 class="mb-0 font-w-6">Related Products</h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="owl-carousel no-pb owl-2" data-dots="false" data-nav="true" data-items="4" data-md-items="2" data-sm-items="1">
          <div class="item">
            <div class="card product-card card--default"> <a class="card-img-hover d-block" href="product-left-image.html"> <img class="card-img-top card-img-back" src="assets/images/product/p2.jpg" alt="..."> <img class="card-img-top card-img-front" src="assets/images/product/p2_hover.jpg" alt="..."> </a>
                      <div class="card-icons">
                        <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Add to wishlist"> <i class="lar la-heart"></i> </a> </div>
                        <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Quick View"><span data-target="#quick-view" data-toggle="modal"> <i class="ion-ios-search-strong"></i></span> </a> </div>
                        <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Compare"> <i class="las la-random"></i> </a> </div>
                      </div>
                      <div class="card-info">
                        <div class="card-body">
                          <div class="product-title font-w-5"><a class="link-title" href="product-left-image.html">Unpaired Running Shoes</a> </div>
                          <div class="mt-1"> <span class="product-price text-pink"><del class="text-muted">$35.00</del> $25.00</span>
                            <div class="star-rating"><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i> </div>
                          </div>
                        </div>
                        <div class="card-footer bg-transparent border-0">
                          <div class="product-link d-flex align-items-center justify-content-center">
                            <button class="btn-cart btn btn-pink mx-3" type="button"><i class="las la-shopping-cart mr-1"></i> Add to cart </button>
                          </div>
                        </div>
                      </div>
                    </div>
          </div>
          <div class="item">
            <div class="card product-card card--default"> <a class="card-img-hover d-block" href="product-left-image.html"> <img class="card-img-top card-img-back" src="assets/images/product/p11.jpg" alt="..."> <img class="card-img-top card-img-front" src="assets/images/product/p11_hover.jpg" alt="..."> </a>
                      <div class="card-icons">
                        <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Add to wishlist"> <i class="lar la-heart"></i> </a> </div>
                        <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Quick View"><span data-target="#quick-view" data-toggle="modal"> <i class="ion-ios-search-strong"></i></span> </a> </div>
                        <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Compare"> <i class="las la-random"></i> </a> </div>
                      </div>
                      <div class="card-info">
                        <div class="card-body">
                          <div class="product-title font-w-5"><a class="link-title" href="product-left-image.html">Unpaired Running Shoes</a> </div>
                          <div class="mt-1"> <span class="product-price text-pink"><del class="text-muted">$35.00</del> $25.00</span>
                            <div class="star-rating"><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i> </div>
                          </div>
                        </div>
                        <div class="card-footer bg-transparent border-0">
                          <div class="product-link d-flex align-items-center justify-content-center">
                            <button class="btn-cart btn btn-pink mx-3" type="button"><i class="las la-shopping-cart mr-1"></i> Add to cart </button>
                          </div>
                        </div>
                      </div>
                    </div>
          </div>
          <div class="item">
            <div class="card product-card card--default"> <a class="card-img-hover d-block" href="product-left-image.html"> <img class="card-img-top card-img-back" src="assets/images/product/p15.jpg" alt="..."> <img class="card-img-top card-img-front" src="assets/images/product/p15_hover.jpg" alt="..."> </a>
                      <div class="card-icons">
                        <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Add to wishlist"> <i class="lar la-heart"></i> </a> </div>
                        <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Quick View"><span data-target="#quick-view" data-toggle="modal"> <i class="ion-ios-search-strong"></i></span> </a> </div>
                        <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Compare"> <i class="las la-random"></i> </a> </div>
                      </div>
                      <div class="card-info">
                        <div class="card-body">
                          <div class="product-title font-w-5"><a class="link-title" href="product-left-image.html">Unpaired Running Shoes</a> </div>
                          <div class="mt-1"> <span class="product-price text-pink"><del class="text-muted">$35.00</del> $25.00</span>
                            <div class="star-rating"><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i> </div>
                          </div>
                        </div>
                        <div class="card-footer bg-transparent border-0">
                          <div class="product-link d-flex align-items-center justify-content-center">
                            <button class="btn-cart btn btn-pink mx-3" type="button"><i class="las la-shopping-cart mr-1"></i> Add to cart </button>
                          </div>
                        </div>
                      </div>
                    </div>
          </div>
          <div class="item">
            <div class="card product-card card--default">
                        <div class="hot-label">Hot</div>
                        <a class="card-img-hover d-block" href="product-left-image.html"> <img class="card-img-top card-img-back" src="assets/images/product/p5.jpg" alt="..."> <img class="card-img-top card-img-front" src="assets/images/product/p5_hover.jpg" alt="..."> </a>
                        <div class="card-icons">
                          <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Add to wishlist"> <i class="lar la-heart"></i> </a> </div>
                          <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Quick View"><span data-target="#quick-view" data-toggle="modal"> <i class="ion-ios-search-strong"></i></span> </a> </div>
                          <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Compare"> <i class="las la-random"></i> </a> </div>
                        </div>
                        <div class="card-info">
                          <div class="card-body">
                            <div class="product-title font-w-5"><a class="link-title" href="product-left-image.html">Unpaired Running Shoes</a> </div>
                            <div class="mt-1"> <span class="product-price text-pink"><del class="text-muted">$35.00</del> $25.00</span>
                              <div class="star-rating"><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i> </div>
                            </div>
                          </div>
                          <div class="card-footer bg-transparent border-0">
                            <div class="product-link d-flex align-items-center justify-content-center">
                              <button class="btn-cart btn btn-pink mx-3" type="button"><i class="las la-shopping-cart mr-1"></i> Add to cart </button>
                            </div>
                          </div>
                        </div>
                      </div>
          </div>
          <div class="item">
            <div class="card product-card card--default"> <a class="card-img-hover d-block" href="product-left-image.html"> <img class="card-img-top card-img-back" src="assets/images/product/p6.jpg" alt="..."> <img class="card-img-top card-img-front" src="assets/images/product/p6_hover.jpg" alt="..."> </a>
                        <div class="card-icons">
                          <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Add to wishlist"> <i class="lar la-heart"></i> </a> </div>
                          <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Quick View"><span data-target="#quick-view" data-toggle="modal"> <i class="ion-ios-search-strong"></i></span> </a> </div>
                          <div class="card-icons__item"> <a href="#" data-toggle="tooltip" data-placement="left" title="" data-original-title="Compare"> <i class="las la-random"></i> </a> </div>
                        </div>
                        <div class="card-info">
                          <div class="card-body">
                            <div class="product-title font-w-5"><a class="link-title" href="product-left-image.html">Unpaired Running Shoes</a> </div>
                            <div class="mt-1"> <span class="product-price text-pink"><del class="text-muted">$35.00</del> $25.00</span>
                              <div class="star-rating"><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i><i class="las la-star"></i> </div>
                            </div>
                          </div>
                          <div class="card-footer bg-transparent border-0">
                            <div class="product-link d-flex align-items-center justify-content-center">
                              <button class="btn-cart btn btn-pink mx-3" type="button"><i class="las la-shopping-cart mr-1"></i> Add to cart </button>
                            </div>
                          </div>
                        </div>
                      </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!--recent product end-->



</div>

<!--body content end-->

  <!--底部 start-->

  <footer class="py-11 bg-dark-1">
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-4"> <a class="footer-logo text-white h2 mb-0" href="index.html"> <img class="img-fluid" src="assets/images/logo001.png" alt=""> </a>

        </div>
        <div class="col-12 col-lg-8 mt-6 mt-lg-0">
          <h5 style="color: white;">佩奇牧场，专注于提供高品质肉类生产及行业解决方案，通过创新技术引领现代农业革新，为中国消费者提供安全、美味的优质食品。<h5>
        </div>
      </div>
      <div class="row pt-9">
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="d-flex footer-box">
            <div class="mr-4"> <i class="las la-map-marker-alt ic-2x icon-img"></i> </div>
            <div>
              <h6 class="mb-1 text-white font-w-5">公司地址</h6>
              <p class="mb-0 font-w-4 text-muted">广东省珠海市</p>
              <p>香洲区国贸大厦88楼 佩奇牧场</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="d-flex footer-box">
            <div class="mr-4"> <i class="las la-envelope ic-2x icon-img"></i> </div>
            <div>
              <h6 class="mb-1 text-white font-w-5">联系邮箱</h6>
              <a class="text-muted font-w-4" href="mailto:themeht23@gmail.com"> pagepigmc@gmail.com</a><br>
              <a class="text-muted font-w-4" href="mailto:themeht23@gmail.com"> pqmc@gmail.com</a> </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12 mt-md-3 mt-lg-0">
          <div class="d-flex footer-box">
            <div class="mr-4"> <i class="las la-mobile ic-2x icon-img"></i> </div>
            <div>
              <h6 class="mb-1 text-white font-w-5">联系我们</h6>
              <p class="mb-0 font-w-4 text-muted">   24/7客服<br>
                +400 888 2333 </p>
            </div>
          </div>
        </div>
      </div>
      <div >
        <br><br />
        <div style="text-align: center;color: white;"><small>Copyright ©&copy; 2020 佩奇牧场  pqmc.xyz All Rights Reserved</small> </div>
      </div>
  </footer>

 
<!--back-to-top start-->

<div class="scroll-top"><a class="smoothscroll" href="#top"><i class="las la-angle-up"></i></a></div>

<!--back-to-top end-->

<!-- inject js start -->

<script src="assets/js/jquery-3.5.1.min.js"></script> <script src="assets/js/popper.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 
<script src="assets/js/owl.carousel.min.js"></script> 
<script src="assets/js/light-slider.js"></script> 
<script src="assets/js/parallax.js"></script> 
<script src="assets/js/magnific-popup.min.js"></script> 
<script src="assets/js/jquery.countdown.min.js"></script> 
<script src="assets/js/jquery.dd.min.js"></script> 
<script src="assets/js/validator.js"></script> 
<script src="assets/js/wow.js"></script> 
<script src="assets/js/theme-script.js"></script> 

<!-- inject js end -->

</body>
</html>
